<template>
  <div class="counter-box">
    <div class="title">
      <p>预约渠道数据统计</p>
      <p class="bg" />
    </div>
    <div ref="charts" class="echarts-box" />
  </div>
</template>

<script setup lang="ts" name="Year">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

let charts = ref();

onMounted(() => {
  let mycharts = echarts.init(charts.value);
  let options = {
    tooltip: {
      trigger: 'none',
    },
    legend: {
      top: '15%',
      left: '30',
      orient: 'vertical',
      itemWidth: 20,
      itemHeight: 20,
      itemGap: 20,
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
      formatter: function (name: any) {
        // 获取每个项的百分比
        type Item = {
          value: number;
          name: string;
        };
        let total: number = 0;
        let data: Item[] = options.series[0].data as Item[];
        data.forEach((item: Item) => {
          total += item.value;
        });

        // 查找当前 legend 项的数据并计算百分比
        let item: Item | undefined = data.find((item: Item) => {
          return item.name === name;
        });
        let percent = item ? ((item.value / total) * 100).toFixed(0) : '0';
        return `${name}---${percent}%`;
      },
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        // right: 10,
        itemStyle: {
          color: function (params: any) {
            let colorList = ['#0277E7', '#FF8D4D', '#E883E0', '#FF5967'];
            return colorList[params.dataIndex];
          },
          borderRadius: 0,
        },
        label: {
          show: false,
          position: 'center',
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 400, name: '智慧文旅平台' },
          { value: 100, name: '携程' },
          { value: 200, name: '飞猪' },
          { value: 300, name: '其他渠道' },
        ],
      },
      {
        type: 'pie',
        padAngle: 60,
        startAngle: -10,
        radius: ['79%', '80%'],
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        itemStyle: {
          color: 'rgba(5, 143, 255,0.8)',
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1, 1, 1],
      },
      {
        type: 'pie',
        padAngle: 90,
        startAngle: 180,
        radius: ['42%', '43%'],
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        itemStyle: {
          color: 'rgba(5, 143, 255,0.5)',
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1, 1],
      },
      {
        type: 'pie',
        padAngle: 6,
        radius: ['29%', '30%'],
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        itemStyle: {
          color: 'rgba(5, 143, 255,1)',
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      },
      {
        type: 'pie',
        padAngle: 120,
        startAngle: 45,
        radius: ['13%', '20%'],
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        itemStyle: {
          color: '#fff',
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1],
      },
      {
        type: 'pie',
        padAngle: 270,
        startAngle: 225,
        radius: ['', '20%'],
        top: '-10%',
        left: '15%',
        width: '110%',
        height: '110%',
        itemStyle: {
          color: 'transparent',
          borderColor: '#ffffff',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [1],
      },
    ],
  };
  mycharts.setOption(options);
});
</script>

<style lang="scss" scoped>
.counter-box {
  background: url('../../../../assets/images/screen/dataScreen-main-rc.png') no-repeat;
  background-size: 100% 100%;
  .title {
    color: white;
    font-size: 20px;
    .bg {
      width: 68px;
      height: 7px;
      background: url('../../../../assets/images/screen/dataScreen-title.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .echarts-box {
    margin-top: 20px;
    height: calc(100% - 60px);
  }
}
</style>
